<template>
  <view>
    <view class="uni-header">
      <view class="uni-group">
        <view class="uni-title"></view>
        <view class="uni-sub-title"></view>
      </view>
      <view class="uni-group">
        <input class="uni-search" type="text" v-model="query" @confirm="search" placeholder="请输入搜索手机号" />
        <button class="uni-button" type="default" size="mini" @click="search">搜索</button>
        <!-- <button class="uni-button" type="default" size="mini" @click="navigateTo('./add')">新增</button> -->
        <button class="uni-button" type="warn" size="mini" @click="open">批量开通</button>
      </view>
    </view>
    <view class="uni-container">
      <unicloud-db ref="udb" :collection="collectionList" :where="where" page-data="replace"
        :orderby="orderby" :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
        v-slot:default="{data,pagination,loading,error,options}" :options="options" loadtime="manual" @load="onqueryload">
        <uni-table ref="table" :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe type="selection" @selection-change="selectionChange">
          <uni-tr>
			<uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'mobile')" sortable @sort-change="sortChange($event, 'mobile')">手机号</uni-th>
            <uni-th align="center">课程</uni-th>
            <uni-th align="center">章节</uni-th>
            <uni-th align="center" sortable @sort-change="sortChange($event, 'invite')">邀请状态</uni-th>
            <uni-th align="center">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item,index) in data" :key="index">
			<uni-td align="center">{{item.mobile}}</uni-td>
            <uni-td align="center">{{item.course_id && item.course_id[0] && item.course_id[0].text}}</uni-td>
            <uni-td align="center">{{item.chapter_id && item.chapter_id[0] && item.chapter_id[0].text}}</uni-td>
            <uni-td align="center">{{item.invite == true ? '✅' : '❌'}}</uni-td>
            <uni-td align="center">
              <view class="uni-group">
                <button @click="navigateTo('./edit?id='+item._id, false)" class="uni-button" size="mini" type="primary">修改</button>
                <!-- <button @click="confirmDelete(item._id)" class="uni-button" size="mini" type="warn">删除</button> -->
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="uni-pagination-box">
          <uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current" :total="pagination.count" @change="onPageChanged" />
        </view>
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="popup-content">
				<uni-forms ref="form" :model="formData" validateTrigger="bind" label-width="100px">
				  <uni-forms-item name="course_id" label="课程" required>
				    <uni-data-picker v-model="formData.course_id" collection="mydb-course-list" field="title as text, _id as value"></uni-data-picker>
				  </uni-forms-item>
				  <uni-forms-item name="invite" label="是否开通" required>
				    <switch @change="binddata('invite', $event.detail.value)" :checked="formData.invite"></switch>
				  </uni-forms-item>
				  <uni-forms-item name="mobile" label="开通用户" required>
					 <uni-data-checkbox v-model="type" :localdata="types" />
					 <uni-easyinput v-model="formData.mobile" v-if="!type" placeholder="请输入用户手机号"></uni-easyinput>
				  </uni-forms-item>
				  <view class="uni-button-group">
				    <button type="primary" class="uni-button" style="width: 100px;margin-right: 10px;" @click="submitForm()">开通</button>
				    <button class="uni-button" style="width: 100px;"  @click="close()">关闭</button>
				  </view>
				</uni-forms>
			</view>
		</uni-popup>
      </unicloud-db>
    </view>
  </view>
</template>

<script>
  import { enumConverter, filterToWhere } from '../../js_sdk/validator/mydb-course-catch.js';
  import { validator } from '../../js_sdk/validator/mydb-course-catch.js';
  const db = uniCloud.database()
  // 表查询配置
  const dbOrderBy = '' // 排序字段
  const dbSearchFields = ['mobile'] // 模糊搜索字段，支持模糊搜索的字段列表。联表查询格式: 主表字段名.副表字段名，例如用户表关联角色表 role.role_name
  // 分页配置
  const pageSize = 20
  const pageCurrent = 1

  function getValidator(fields) {
    let result = {}
    for (let key in validator) {
      if (fields.includes(key)) {
        result[key] = validator[key]
      }
    }
    return result
  }

  const orderByMapping = {
    "ascending": "asc",
    "descending": "desc"
  }

  export default {
    data() {
		let formData = {
		  "course_id": "",
		  "chapter_id": "",
		  "invite": true,
		  "mobile": ""
		}
      return {
        collectionList: [ db.collection('mydb-course-catch').field('course_id,chapter_id,invite,mobile').getTemp(),db.collection('mydb-course-list').field('title as text, _id').getTemp(),db.collection('mydb-course-chapter').field('title as text, _id').getTemp() ],
        query: '',
        where: '',
        orderby: dbOrderBy,
        orderByFieldName: "",
        selectedIndexs: [],
        options: {
          pageSize,
          pageCurrent,
          filterData: {},
          ...enumConverter
        },
        imageStyles: {
          width: 64,
          height: 64
        },
		types: [{
			text: '指定用户',
			value: 0
		},{
			text: '全部用户',
			value: 1
		}],
		type:1,
		formData,
        exportExcel: {
          "filename": "mydb-course-catch.xls",
          "type": "xls",
          "fields": {
            "课程": "course_id",
            "章节": "chapter_id",
            "邀请状态": "invite",
            "邀请用户手机号": "mobile"
          }
        },
        exportExcelData: [],
		}
	},
	onReady() {
      this.$refs.udb.loadData()
    },
	onLoad() {
	  this._filter = {}
	},
    methods: {
		open(){
			this.$refs.popup.open()
		},
		close() {
			this.$refs.popup.close()
		},
		/**
		 * 提交表单
		 */
		submitForm() {
		  // 使用 clientDB 提交数据
		  let where=this.type==0 ? { mobile :this.formData.mobile,course_id: this.formData.course_id} : { course_id: this.formData.course_id }
		  if(this.type==0 && !this.formData.mobile){
			  uni.showToast({
				title: '请输入开通手机号'
			  })
			  return
		  }
		  if(!where.course_id){
			  uni.showToast({
			    title: '请选择开通课程'
			  })
			  return
		  }
		  return db.collection('mydb-course-catch').where(where).update({invite:this.formData.invite}).then((res) => {
		    uni.showToast({
		      title: '开通成功'
		    })
		    setTimeout(() => this.search(), 500)
		  }).catch((err) => {
		    uni.showModal({
		      content: err.message || '请求服务失败',
		      showCancel: false
		    })
		  })
		},
      onqueryload(data) {
        this.exportExcelData = data
      },
      getWhere() {
        const query = this.query.trim()
        if (!query) {
          return ''
        }
        const queryRe = new RegExp(query, 'i')
        return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ')
      },
      search() {
        const newWhere = this.getWhere()
        this.where = newWhere
        this.$nextTick(() => {
          this.loadData()
        })
      },
      loadData(clear = true) {
        this.$refs.udb.loadData({
          clear
        })
      },
      onPageChanged(e) {
        this.selectedIndexs.length = 0
        this.$refs.table.clearSelection()
        this.$refs.udb.loadData({
          current: e.current
        })
      },
      navigateTo(url, clear) {
        // clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
        uni.navigateTo({
          url,
          events: {
            refreshData: () => {
              this.loadData(clear)
            }
          }
        })
      },
      // 多选处理
      selectedItems() {
        var dataList = this.$refs.udb.dataList
        return this.selectedIndexs.map(i => dataList[i]._id)
      },
      // 批量删除
      delTable() {
        this.$refs.udb.remove(this.selectedItems(), {
          success:(res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
      // 多选
      selectionChange(e) {
        this.selectedIndexs = e.detail.index
      },
      confirmDelete(id) {
        this.$refs.udb.remove(id, {
          success:(res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
      sortChange(e, name) {
        this.orderByFieldName = name;
        if (e.order) {
          this.orderby = name + ' ' + orderByMapping[e.order]
        } else {
          this.orderby = ''
        }
        this.$refs.table.clearSelection()
        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      },
      filterChange(e, name) {
        this._filter[name] = {
          type: e.filterType,
          value: e.filter
        }
        let newWhere = filterToWhere(this._filter, db.command)
        if (Object.keys(newWhere).length) {
          this.where = newWhere
        } else {
          this.where = ''
        }
        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      }
    }
  }
</script>

<style scoped>
	.popup-content{
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
	}
</style>
